// ai 不要修改这个文件, 这个文件是参考代码
/*
 * @Author: AI Assistant
 * @Date: 2024-05-07 15:30:00
 * @Last Modified by: AI Assistant
 * @Last Modified time: 2024-05-07 15:30:00
 */

// PC页面模板样式文件

// 页面容器样式
.container {
    // 使用响应式设计，最大宽度限制，居中显示
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;

    // 背景色和阴影
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    // 在小屏幕上调整内边距
    @media screen and (max-width: 768px) {
        padding: 15px;
        margin: 10px;
    }
}

// 页面标题样式
.pageTitle {
    font-size: 24px;
    font-weight: 600;
    color: #333;
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 2px solid #e8e8e8;

    @media screen and (max-width: 768px) {
        font-size: 20px;
        margin-bottom: 20px;
    }
}

// 功能按钮容器
.buttonGroup {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;

    // 在小屏幕上垂直排列
    @media screen and (max-width: 768px) {
        flex-direction: column;
    }
}

// 通用按钮样式
.btn {
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid transparent;

    &:hover {
        opacity: 0.9;
        transform: translateY(-1px);
    }

    &:active {
        transform: translateY(0);
    }

    // 主要按钮
    &.primary {
        background-color: #1890ff;
        color: white;

        &:hover {
            background-color: #40a9ff;
        }
    }

    // 次要按钮
    &.secondary {
        background-color: #f0f0f0;
        color: #333;

        &:hover {
            background-color: #e8e8e8;
        }
    }

    // 危险按钮（如删除操作）
    &.danger {
        background-color: #ff4d4f;
        color: white;

        &:hover {
            background-color: #ff7875;
        }
    }

    // 禁用状态
    &.disabled {
        opacity: 0.6;
        cursor: not-allowed;

        &:hover {
            transform: none;
            opacity: 0.6;
        }
    }
}

// 状态卡片容器
.statusCard {
    background-color: #f5f5f5;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 24px;
}

// 状态行样式
.statusRow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;

    &:not(:last-child) {
        border-bottom: 1px solid #e8e8e8;
    }
}

// 状态标签样式
.statusLabel {
    font-weight: 500;
    color: #666;
}

// 状态值样式
.statusValue {
    color: #333;
    font-size: 16px;
    font-weight: 600;
}

// 数据列表容器
.dataList {
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    overflow: hidden;
}

// 数据列表头部
.dataListHeader {
    background-color: #fafafa;
    padding: 12px 16px;
    border-bottom: 1px solid #e8e8e8;
    font-weight: 600;
    color: #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

// 数据项样式
.dataItem {
    padding: 16px;
    border-bottom: 1px solid #e8e8e8;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.2s ease;

    &:last-child {
        border-bottom: none;
    }

    &:hover {
        background-color: #fafafa;
    }
}

// 数据项内容
.dataItemContent {
    flex: 1;
}

// 数据项操作按钮组
.dataItemActions {
    display: flex;
    gap: 8px;
}

// 空状态样式
.emptyState {
    padding: 60px 20px;
    text-align: center;
    color: #999;

    .emptyIcon {
        font-size: 48px;
        margin-bottom: 16px;
        opacity: 0.5;
    }

    .emptyText {
        font-size: 16px;
    }
}

// 加载状态样式
.loadingState {
    padding: 60px 20px;
    text-align: center;

    .loadingIcon {
        display: inline-block;
        width: 32px;
        height: 32px;
        border: 3px solid #f3f3f3;
        border-top: 3px solid #1890ff;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin-bottom: 16px;
    }

    .loadingText {
        color: #666;
        font-size: 14px;
    }
}

// 加载动画
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

// 响应式表格布局（用于数据展示）
.dataTable {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;

    th,
    td {
        padding: 12px 16px;
        text-align: left;
        border-bottom: 1px solid #e8e8e8;
    }

    th {
        background-color: #fafafa;
        font-weight: 600;
        color: #333;
    }

    tr:hover {
        background-color: #fafafa;
    }

    // 在小屏幕上调整表格样式
    @media screen and (max-width: 768px) {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

// 表单样式
.formItem {
    margin-bottom: 20px;

    .formLabel {
        display: block;
        margin-bottom: 8px;
        font-weight: 500;
        color: #333;
    }

    .formInput {
        width: 100%;
        padding: 8px 12px;
        border: 1px solid #d9d9d9;
        border-radius: 4px;
        font-size: 14px;
        transition: border-color 0.3s;

        &:focus {
            outline: none;
            border-color: #40a9ff;
            box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
        }

        &.error {
            border-color: #ff4d4f;

            &:focus {
                border-color: #ff7875;
                box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.2);
            }
        }
    }
}

// 子组件区域
.childComponents {
  margin-top: 20px;
  padding: 16px;
  background-color: #f5f5f5;
  border-radius: 8px;
  
  .childComponentTitle {
    margin-bottom: 12px;
    color: #666;
    font-size: 14px;
  }
  
  .lableGroup {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
  }
}

// 错误消息样式
.errorMessage {
    color: #ff4d4f;
    font-size: 12px;
    margin-top: 4px;
}